<template>
	<view class="video-bg-box">
		<video :id="storyId" :loop="loop" :muted="muted" :autoplay="autoPlay" :play-strategy="2" :http-cache="true"
			:show-play-btn="false" :show-center-play-btn="false" :controls="false" :show-fullscreen-btn="false" :show-progress="false"
			:page-gesture="false" :vslide-gesture="flase" :vslide-gesture-in-fullscreen="false" :show-loading="false"
			:enable-progress-gesture="false" :src="src" :mobilenet-hint-type="0" object-fit="cover"
			:style="{ width: '100vw',height:'100vh' }" @loadedmetadata="onLoadedmetadata" @timeupdate="onTimeUpdate"
			@play="onPlay" @pause="onPause" @ended="onEnded" @error="onErrorr">
		</video>
	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {
			muted: {
				type: Boolean,
				default: false
			},
			loop: {
				type: Boolean,
				default: false
			},
			autoPlay: {
				type: Boolean,
				default: false
			},
			storyId: {
				type: [Number, String],
				default: "",
			},
			story_index: {
				type: [Number, String],
				default: "",
			},
			current: {
				type: [Number, String],
				default: "",
			},
			src: {
				type: String,
			}
		},
		data() {
			return {
				duration: 0,
			};
		},
		watch: {
			current: {
				deep: true,
				immediate: true,
				handler(v) {
					console.log(v, this.story_index, 'current--------------')
					if (v == this.story_index) {
						this.play()
					}
				},
			},
			src: {
				deep: true,
				immediate: false,
				handler(v) {
					console.log(v, this.story_index, 'src--------------')
					if (this.current == this.story_index) {
						this.play()
					}
				},
			},
		},
		onReady() {

		},
		computed: {

		},


		created() {

		},

		mounted() {
	
		},
		methods: {

			play() {
				uni.createVideoContext(this.storyId, this).play()
			},
			rePlayVideo() {
				let videoContext = uni.createVideoContext(this.storyId, this)
				if (this.duration) {
					// 返回到倒数第3秒
					videoContext.seek(this.duration - 2);
					videoContext.play();
				}
			},
			onLoadedmetadata(e) {

			},
			onTimeUpdate(e) {
				if (!this.duration) {
					this.duration = e.detail.duration
				}
				// console.log(e.detail.duration - e.detail.currentTime)
				if (e.detail.duration - e.detail.currentTime <= 0.5) {

					this.rePlayVideo()
				}
			},
			onPlay(e) {

			},
			onPause(e) {

			},
			/**
			 * @desc 播放结束，循环播放倒数3秒
			 * @param {Object} e
			 */
			onEnded(e) {
				this.rePlayVideo()
			},
			onErrorr(e) {

			},

		},
	};
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>